
<template>
    <div>
        <TopBar :title="title"></TopBar>
        <div class="m-detail">
            <img :src="img" alt="">
            <div class="detail-info">
                <div class="u-title">影片简介</div>
                <p>导　　演：{{detailInfo.director}}</p>
                <p class="mainactors">主　　演：<span v-for="item in detailInfo.actors">{{item.name+"|"}}</span></p>
                <p>地区语言：{{detailInfo.nation}} ({{detailInfo.language}})</p>
                <p>类　　型：{{detailInfo.category}}</p>
                <p>上映日期：{{detailInfo.premiereAt | formatDate}}</p>
                <p class="desc">{{detailInfo.synopsis}}</p>
            </div>
            <a href="javascript:;">立即购票</a>
        </div>
    </div>
</template>

<script>
    import TopBar from './TopBar.vue';
    import $ from 'jquery';
    export default {
        data: function() {
            return {
                detailInfo: {},
                title: '',
                img: '' 
            }
        },
        filters: {
            'formatDate': function(val) {
                var time = new Date(val);
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return m + '月' + d + '日上映';
            }
        },
        components: {
            TopBar
        },
        mounted: function() {
            // 请求详情的数据
            var url = 'http://localhost:3000/' + this.$route.params.id  + '?time=' + new Date().getTime();
            var that = this;
            $.get(url, function(res) { 
                that.detailInfo = res.data.film;
                that.img = res.data.film.cover.origin;
                that.title = res.data.film.name;
            })
        }
    }
</script>

<style>
    .m-detail img { width: 100%;}
    .mainactors{
        white-space: nowrap;
    }
    .m-detail { 
        color: #333;
        padding-top: .5rem
         }
    .detail-info .u-title { 
        margin: 16px auto; 
        border-left: .16rem solid rgb(228, 200, 156); 
        font-size: .16rem; 
        padding-left: .04rem;
        }

    .detail-info p { 
        height: .18rem; 
        overflow: hidden; 
        margin-bottom: .1rem; 
        padding-left: .2rem; 
        font-size: .12rem;
        }
    .detail-info p.desc { 
        height: auto; 
        line-height: 1.5;
        margin-bottom: .8rem;
        padding-right: .2rem;
        white-space: pre-wrap;
        }

    .m-detail a { 
        display: inline-block; 
        font-size: .14rem;
        min-width: 1.56rem; 
        height: .36rem; 
        line-height: .36rem;
        background-color: #fe8233; 
        border-radius: .18rem;
        color: #fff;
        text-align: center; 
        position: fixed; 
        bottom: .2rem; 
        left: 50%; 
        margin-left: -.78rem; 
        text-decoration: none; 
        }
</style>